<template>
  <div class="containner">
    <div class="upload-container" @click="show = true">
      <img src="../../assets/logo.jpeg" alt="" />
    </div>
    <div class="upload" v-show="show">
      <div class="close-btn" @click="show = false">X</div>
      <div
        class="image"
        ref="imageRef"
        :style="[{ transform, backgroundSize: percent }]"
      >
        <div class="cover"></div>
        <div class="circle" ref="oMark"></div>
      </div>
      <button @click="add">+</button>
      <button @click="sub">-</button>
      <button @click="rotateRight">right</button>
      <button @click="rotateLeft">left</button>
      <button @click="upload">
        上传
        <input type="file" ref="fileInput" style="display: none" />
      </button>
    </div>
    <hr />
    <h3>Canvas裁切视图</h3>
    <canvas ref="canvasRef" height="100" width="100" class="canvas"></canvas>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
  name: '',

  setup() {
    const count = ref(0);
    const show = ref(false);
    const percent = ref('100%');
    const fileInput = ref();
    const imageRef = ref();
    const canvasRef = ref();
    const imageData = ref();
    const oMark = ref();
    // lastedImage 保存着最新生成的base64的图片信息默认为null
    const lastedImage = ref(null);
    const toUpload = () => {
      console.log(fileInput);
      // fileInput.addEventListener('click', e => {
      //   console.log(fileInput.files);
      // });
    };
    const add = () => {
      percent.value = percent.value.split('%')[0] * 2 + '%';
      // 切图
      const canvas = canvasRef.value;
      const cut = canvas.getContext('2d');
      const newImage = new Image();
      // 如果做了缩放操作，根据最新生成的base64的图片操作
      if (lastedImage.value) {
        newImage.src = lastedImage.value;
        newImage.onload = () => {
          cut.drawImage(newImage, 40, 110, 100, 100, 0, 0, 100, 100);
        };
      } else {
        newImage.src = imageData.value;
        newImage.onload = () => {
          cut.drawImage(newImage, 40, 110, 100, 100, 0, 0, 100, 100);
        };
      }
      //end
    };
    const sub = () => {
      percent.value = percent.value.split('%')[0] * 0.5 + '%';
    };
    const rotateRight = () => {
      if (count.value === 360) {
        count.value = 0;
      }
      count.value += 90;

      const image = new Image();
      image.src = imageData.value;
      image.style.transform = `rotate(${count.value}deg)`;
      image.onload = () => {
        // 旋转了图片重新去生成了一张base64的图片
        // console.log('aaa');
        // document.body.appendChild(image);
      };
      console.log(count.value);
    };
    const rotateLeft = () => {
      if (count.value === -360) {
        count.value = 0;
      }
      count.value -= 90;
    };
    const upload = () => {
      fileInput.value.addEventListener('change', () => {
        const fileData = fileInput.value.files[0];
        if (fileData && fileData.size) {
          var size = fileData.size / 1000 / 1024;
          // 如果图片大于2M则重新上传，这里e.target.files[0].size单位是b
          if (size > 2) {
            alert('图片太大,请重新上传');
          }
          // 如果上传的不是图片格式，提示请选择图片
          const rFilter =
            /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
          if (!rFilter.test(fileData.type)) {
            alert('请选择图片格式!');
          }
          const reader = new FileReader();
          reader.readAsDataURL(fileData);
          reader.onloadstart = function () {
            console.log('图片正在上传处理......');
          };
          //操作完成
          reader.onload = function (e) {
            // console.log(reader.result);
            // file 对象的属性
            imageRef.value.setAttribute(
              'style',
              `background-image: url("${reader.result}") ;background-repeat:no-repeat; background-position: center center; position:relative `
            );
            //将base64编码的图片信息保留
            imageData.value = reader.result;
          };
        }
      });
      fileInput.value.click();
    };
    const transform = computed(() => `rotate(${count.value}deg)`);
    return {
      show,
      transform,
      percent,
      fileInput,
      imageRef,
      canvasRef,
      add,
      sub,
      rotateRight,
      rotateLeft,
      toUpload,
      upload,
    };
  },
});
</script>

<style lang="less" scoped>
.canvas {
  border-radius: 20px;
}
.upload-container {
  width: 400px;
  height: 400px;
  img {
    width: 100%;
  }
}
.upload {
  width: 200px;
  height: 200px;
  background-color: #fff;
  position: relative;
  .close-btn {
    color: red;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    width: 20px;
    height: 20px;
    line-height: 20px;
    position: absolute;
    border: 1px solid slategrey;
    border-radius: 50%;
    right: -10px;
    top: -10px;
    z-index: 20;
  }
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .image {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background-position: center center;
    background-size: cover;
    background-color: #fff;
    // .cover {
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    //   width: 400px;
    //   height: 300px;
    //   background: #333;
    //   opacity: 0.2;
    //   z-index: 22;
    // }
    .circle {
      width: 100px;
      height: 100px;
      background: transparent;
      position: absolute;
      top: 50%;
      left: 50%;
      border: 1px solid #666;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      -webkit-box-shadow: 0 0 0 1000px rgb(0 0 0 / 50%);
      box-shadow: 0 0 0 1000px rgb(0 0 0 / 50%);
      background: none repeat scroll 0% 0% transparent;
    }
  }
}
</style>
